<template>
  <view class="charging-page">
    
    <view class="page-top">
      <!-- 状态栏占位 -->
      <view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
      <!-- 顶部地图搜索区域 -->
      <view class="map-header-section">
        <view class="map-search-container" @click="goToMap">
          <image src="/static/images/map.png" class="map-icon" mode="aspectFit" />
          <text class="map-text">地图</text>
        </view>
        <view class="map-header-search" style="margin-left:10rpx">
          <uni-icons type="search" size="20" color="#ccc" />
          <input 
            class="search-input" 
            placeholder="输入站点名称" 
            placeholder-class="search-placeholder"
            @click="goToMapSearch"
          />
        </view>
        <!-- <view class="header-actions">
          <uni-icons type="ellipsis" size="28" color="#333" />
          <uni-icons type="scan" size="28" color="#333" style="margin-left: 20rpx;" />
        </view> -->
      </view>
      
      <view class="index-page-top">
        <!-- 登录后 -->
        <!-- 充电统计和活动区域 -->
        <view class="charge-stats-section">
          <view class="stats-card" @click="clickTask(1)">
            <view class="stats-header">
              <text class="stats-title">今日已充<text style="font-size: 36rpx;">{{personalInfo.dayPower}}</text>度</text>
              <text class="stats-action">{{personalInfo.dayPowerTips}}</text>
            </view>
            <view class="stats-progress">
              <!-- personalInfo.dayRewards -->
              <view v-for="(item,index) in personalInfo.dayRewards" :key="index" class="progress-item" :style="personalInfo.dayRewards && index !== personalInfo.dayRewards.length - 1 ? 'flex-grow: 1':''">
                <view style="flex-grow: 1;position:relative">
                  <view style="width:max-content">
                    <view :class="item.gotIt == 1 ? 'progress-badge active':'progress-badge'">
                      <image class="icon-gift" :src="item.gotIt == 1?'/static/images/active-gift.png':'/static/images/gift-ticket.png'" mode="aspectFit" />
                      <image class="active-checked" v-if="item.gotIt == 1" src="/static/images/checked.png" mode="aspectFit" />
                      <!-- {{item.rewardTitle}} -->
                      <text>{{item.rewardTitle}}</text>
                    </view>
                  </view>
                  <view :class="item.gotIt == 1?'active-power':'power-number'">
                    <text>{{item.power}}</text>
                    <text style="font-size:26rpx">度</text>
                  </view>
                </view>  
                <view style="flex-grow: 1;" v-if="personalInfo.dayRewards && index !== personalInfo.dayRewards.length - 1" class="progress-divider">
                  <!-- <view :class="item.gotIt == 1 ? 'active-line':'no-active-line'"></view> -->
                  <view :class="item.gotIt == 1 ? 'no-active-line active-line':'no-active-line'"></view>
                </view>
              </view>
            </view>
          </view>
          <view class="monthly-stats" @click="clickTask(2)">
            <view class="month-total">本月充电累计</view>
            <view class="month-total">
              <text class="monthly-number">{{personalInfo.monthPower}}</text>
              <text class="monthly-unit">度</text>
            </view>
            <view class="monthly-bottom" style="margin-top:42rpx">再充85度</view>
            <view class="monthly-bottom">赠送3元充电券</view>
          </view>
        </view>
        <!-- 卡券 -->
        <view class="coupon-section">
          <!-- 我的卡券 -->
          <view class="my-coupon" @click="goToCoupon">
            <view class="coupon-title" style="margin-bottom:10rpx">我的卡券</view>
            <view class="coupon-count" style="margin-bottom:14rpx">
              <text style="font-weight:600;color:#fff">6</text>
              张
            </view>
            <view class="coupon-tip" style="margin-bottom:4rpx">再充128度</view>
            <view class="coupon-tip">赠送18元餐券</view>
          </view>
          
          <!-- 卡券明细 -->
          <view class="coupon-detail" @click="goToCoupon">
            <text class="detail-title">卡券明细</text>
            <view class="coupon-list">
              <view class="coupon-card">
                <view class="coupon-amount">¥<text style="font-size:24rpx">3</text></view>
                <view class="coupon-type">服务费减免</view>
              </view>
              <view class="coupon-card">
                <view class="coupon-amount">¥<text style="font-size:24rpx">3</text></view>
                <view class="coupon-type">餐券</view>
              </view>
              <view class="coupon-card">
                <view class="coupon-amount">¥<text style="font-size:24rpx">3</text></view>
                <view class="coupon-type">理发券</view>
              </view>
              
              <!-- <text class="coupon-type">服务费减免</text> -->
              <!-- <view class="coupon-card">
                <image src="/static/images/red-ticket.png" class="coupon-icon" mode="aspectFit" />
                <text class="coupon-amount">¥18</text>
                <text class="coupon-type">餐券</text>
              </view>
              <view class="coupon-card">
                <image src="/static/images/red-ticket.png" class="coupon-icon" mode="aspectFit" />
                <text class="coupon-amount">¥38</text>
                <text class="coupon-type">理发券</text>
              </view> -->
            </view>
          </view>
        </view>
        
        <!-- 保养优惠活动 v-if="personalInfo.banners.length" -->
        <!-- <view v-if="personalInfo.banners && personalInfo.banners.length" class="promotion-section">
          <swiper autoplay circular :indicator-dots="true" indicator-active-color="#319289">
              <swiper-item v-for="(item, index) in personalInfo.banners" :key="index">
                  <image :src="item.imageUrl" class="promotion-banner" @click="clickBanner(item)" mode="aspectFit" />
              </swiper-item>
          </swiper>
        </view> -->
        
        <!-- 功能导航区 -->
        <view class="function-nav-section">
          <view class="function-grid">
            <view class="function-item travel-platform" @click="goToTravelPlatform">
              <image src="/static/images/out.png" class="function-icon" mode="aspectFit" />
              <text class="function-text">租买车</text>
              <!-- <view class="function-detail">
                <text>积分</text><text>卡券</text><text>兑换</text>
              </view> -->
            </view>
            <view class="function-item driver-life" @click="goToDriverLife">
              <image src="/static/images/life.png" class="function-icon" mode="aspectFit" />
              <text class="function-text">司机生活</text>
              <!-- <view class="function-detail">
                <text>餐厅</text><text>住宿</text><text>购物</text>
              </view> -->
            </view>
            <view class="function-item car-service" @click="goToVehicleService">
              <image src="/static/images/service.png" class="function-icon" mode="aspectFit" />
              <text class="function-text">车辆服务</text>
              <!-- <view class="function-detail">
                <text>租车</text><text>维修</text><text>补漆</text>
              </view> -->
            </view>
            <view class="function-item stage-bg" @click="goToDriverStation">
              <image src="/static/images/stage.png" class="function-icon" mode="aspectFit" />
              <text class="function-text">司机工会</text>
              <!-- <view class="function-detail">
                <text>充电</text><text>洗衣</text><text>休息</text>
              </view> -->
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <view style="padding: 0 32rpx;">
          <!-- 筛选区域 -->
    <view class="filter-section">
        <view 
          class="filter-tab" 
          :class="{ active: currentTab === 0 }" 
          @click="switchTab(0)"
        >距离优先{{ currentTab === 0 ? ' ▼' : '' }}</view>
        <!-- {{ currentTab === 1 ? ' ▼' : '' }} -->
        <view 
          class="filter-tab" 
          :class="{ active: currentTab === 1 }" 
          @click="switchTab(1)"
        >价格优先{{ currentTab === 1 ? ' ▼' : '' }}</view>
        <!-- <view 
          class="filter-tab" 
          :class="{ active: currentTab === 2 }" 
          @click="switchTab(2)"
        >利行驿站</view> -->
    </view>
    
    <!-- 充电站列表 -->
    <!-- 精选充电站 -->
      <view v-show="currentTab !== 2">
        <!-- <text class="featured-title">利行充电</text> -->
        <!-- 充电站列表 -->
        <view v-for="(station, index) in stationList" :key="index" :class="index == 0?'featured-section':''">
          <view v-if="index == 0" class="lixing-tag">
            <view class="lixing-title">利行司机驿站</view>
            <!-- <image src="/static/images/lixing-charge.png" class="lixing-charge" mode="aspectFit" /> -->
            <!-- <view class="tag-text">环境好</view>
            <view class="tag-text">充电快</view> -->
          </view>
          <station-card 
            :station="station"
            :modifyWidth="true"
            :show-location-click="true"
            @card-click="goToStation(station)"
            @location-click="goToStationLocation"
            v-show="currentTab !== 2"
          />
        </view>
      </view>
    </view>


    <!-- 奖励弹窗 -->
    <van-popup :show="showTicketPop" custom-class="pop-main-page" custom-style="border-radius: 76rpx;" closeable position="center" @close="onClosePop">
        <view class="pop-main" style="padding: 52rpx;padding-top:20rpx">
            <view class="pop-task-title" style="margin-bottom:40rpx">{{taskFlag == 1?'今日':'月度'}}任务进度提醒</view>
            <view class="gift-tips" style="margin-bottom:40rpx">{{taskFlag == 1? personalInfo.popDayPowerTips : personalInfo.popMonthPowerTips}}</view>
            <view class="stats-progress" style="height: 250rpx;">
              <!-- personalInfo.dayRewards -->
              <view v-for="(item,index) in rewardList" :key="index" class="progress-item" :style="rewardList && index !== rewardList.length - 1 ? 'flex-grow: 1':''">
                <view style="flex-grow: 1;position:relative">
                  <view style="width:max-content">
                    <view :class="item.gotIt == 1 ? 'pop-progress-badge pop-active':'pop-progress-badge'" style="margin-bottom:20rpx">
                      <image class="icon-gift" style="width:94rpx;height:94rpx;top:-90rpx"
                      :src="item.gotIt == 1?'/static/images/active-gift.png':'/static/images/gift-ticket.png'" mode="aspectFit" />
                      <image class="active-checked" v-if="item.gotIt == 1" style="width:38rpx;height:38rpx;top:-60rpx;"
                        src="/static/images/checked.png" mode="aspectFit" />
                      <!-- {{item.rewardTitle}} -->
                      <text>{{item.rewardTitle}}</text>
                    </view>
                  </view>
                  <view :class="item.gotIt == 1?'pop-active-power':'pop-power-number'">
                    <text>{{item.power}}</text>
                    <text style="font-size:26rpx">度</text>
                  </view>
                </view>  
                <view style="flex-grow: 1;" v-if="rewardList && index !== rewardList.length - 1" class="progress-divider">
                  <!-- <image class="active-line" v-if="item.gotIt == 1" src="/static/images/active-gift-line.png" mode="aspectFit" /> -->
                  <view :class="item.gotIt == 1 ? 'no-active-line active-line':'no-active-line'"></view>
                </view>
              </view>
            </view>
            <view class="task-btn" v-if="rewardStatus == 0">待完成任务后领取</view>
            <view class="task-btn" v-if="rewardStatus == 2">今日奖励已全部领取</view>
            <view class="accept-btn" v-if="rewardStatus == 1" @click="getTheReward">开心收下</view>
            <view class="gift-bottom-tips">请到【个人中心-卡券中】使用</view>
        </view>
    </van-popup>
    <view style="height:120rpx"></view>
    <!-- 底部导航栏 -->
    <smart-tabbar></smart-tabbar>
  </view>
</template>

<script>
import SmartTabbar from '@/components/smart-tabbar/index.vue'
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
import { getChargeStationList } from '@/api/charging/index.js'
import { getPersonalInfo,getTheReward } from '@/api/indexNew/index.js'
import locationManager from '@/utils/location.js'
import StationCard from '@/components/station-card/index.vue'

export default {
  components: {
    SmartTabbar,
    uniIcons,
    StationCard
  },
  data() {
    return {
      taskFlag: 1, // 1今日 2月度
      rewardStatus: 0,// 0 不能领 1可以领 2已全部领取
      showTicketPop: false,
      activeGift: 1,
      statusBarHeight: 0,
      stationList: [],
      storeList: [],
      currentTab: 0,
      refreshing: false,
      page: 1,
      total: 0,
      loading: false,
      storeLoading: false,
      storePage: 1,
      storeTotal: 0,
      personalInfo: {},
      rewardList: []
    }
  },
  onLoad() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    
    // 初始化位置并加载数据
    this.initLocationAndLoadData();

    // this.getPersonalInfo()
  },
  onShow(){
    this.getPersonalInfo()
  },
  methods: {
    goToCoupon(){
      uni.navigateTo({
          url: '/pagesOne/coupon/coupon'
      });
    },
    clickBanner(){

    },
    //登录
    handelLogin() {
        uni.navigateTo({
            url: '/packages/oldpages/pages/login/index'
        });
    },
    clickTask(taskFlag) {
      this.taskFlag = taskFlag
      this.showTicketPop = true
      if (taskFlag == 1) {
        this.rewardList = this.personalInfo.dayRewards
        if (this.personalInfo && this.personalInfo.dayRewards && this.personalInfo.dayRewards.length > 0) {
          // 检查是否所有奖励都已领取
          const allReceived = this.personalInfo.dayRewards.every(item => item.gotIt === 1);
          
          if (allReceived) {
            // 所有奖励都已领取
            this.$set(this.personalInfo, 'popDayPowerTips', `已充${this.personalInfo.dayPower}度 今日任务已全部达成`);
          } else {
            // 找到第一个未领取且电量达标的奖励
            const canReceiveReward = this.personalInfo.dayRewards.find(item => 
              item.gotIt === 0 && item.power <= this.personalInfo.dayPower
            );
            
            if (canReceiveReward) {
              // 有可领取的奖励
              this.$set(this.personalInfo, 'popDayPowerTips', `已充${this.personalInfo.dayPower}度 请领取奖励`);
            } else {
              // 所有未领取的奖励电量均未达标
              this.$set(this.personalInfo, 'popDayPowerTips', '任务奖励待完成后领取');
            }
          }
        } else {
          // // 没有奖励数据
          // this.$set(this.personalInfo, 'popDayPowerTips', '任务奖励待完成后领取');
        }
      } else {
        this.rewardList = this.personalInfo.monthRewards
        // 月度任务
        if (this.personalInfo && this.personalInfo.monthRewards && this.personalInfo.monthRewards.length > 0) {
          // 检查是否所有奖励都已领取
          const allReceived = this.personalInfo.monthRewards.every(item => item.gotIt === 1);
          
          if (allReceived) {
            // 所有奖励都已领取
            this.$set(this.personalInfo, 'popMonthPowerTips', `已充${this.personalInfo.monthPower}度 月度任务已全部达成`);
          } else {
            // 找到第一个未领取且电量达标的奖励
            const canReceiveReward = this.personalInfo.monthRewards.find(item => 
              item.gotIt === 0 && item.power <= this.personalInfo.monthPower
            );
            
            if (canReceiveReward) {
              // 有可领取的奖励
              this.$set(this.personalInfo, 'popMonthPowerTips', `已充${this.personalInfo.monthPower}度 请领取奖励`);
            } else {
              // 所有未领取的奖励电量均未达标
              this.$set(this.personalInfo, 'popMonthPowerTips', '任务奖励待完成后领取');
            }
          }
        } else {
          // // 没有奖励数据
          // this.$set(this.personalInfo, 'popMonthPowerTips', '任务奖励待完成后领取');
        }
      }
    },
    onClosePop() {
      this.showTicketPop = false
    },
    clickMonthTicket(){
      this.showTicketPop = true
    },
    // 初始化位置并加载数据
    initLocationAndLoadData() {
      // 获取当前位置
      const currentLocation = locationManager.getCurrentLocation();
      
      // 检查位置是否过期
      if (locationManager.isLocationExpired(currentLocation)) {
        locationManager.updateLocation((err, newLocation) => {
          if (!err) {
            this.loadChargeStationList(newLocation);
          } else {
            // 使用过期位置或默认位置
            this.loadChargeStationList(currentLocation);
          }
        });
      } else {
        // 使用当前位置
        this.loadChargeStationList(currentLocation);
      }
    },
    
    // 加载充电站列表
    loadChargeStationList(location) {
      const params = {
        stationLat: location.latitude.toString(),
        stationLng: location.longitude.toString(),
        rows: '20',
        page: this.page.toString(),
        sortType: this.currentTab === 0 ? '1' : '2'
      };
      
      this.getChargeStationList(params);
    },
    getPersonalInfo(){
      getPersonalInfo().then((res) => {
        if (res.code === 0) {
          this.personalInfo = res.data
          console.log(this.personalInfo,'个人信息数据')
          // 计算当前可领券的提示语
          console.log(this.personalInfo.dayRewards)
          let filterIndex = this.personalInfo.dayRewards.findIndex(item => item.power > this.personalInfo.dayPower)
          console.log(filterIndex)
          let taskPower = this.personalInfo.dayRewards[filterIndex].power - this.personalInfo.dayPower
          this.$set(this.personalInfo,'dayPowerTips',`再充${taskPower}度得${this.personalInfo.dayRewards[filterIndex].rewardTitle}`)
          // this.personalInfo.dayPower // 今天充电量
          // this.personalInfo.dayRewards // 奖励数组中的gotIt是否领取奖励以及power达到奖励电量
          // 计算rewardStatus: 0不能领, 1可以领, 2已全部领取
          if (this.personalInfo.dayRewards && this.personalInfo.dayRewards.length > 0) {
            // 检查是否所有奖励都已领取
            const allReceived = this.personalInfo.dayRewards.every(item => item.gotIt === 1);
            if (allReceived) {
              this.rewardStatus = 2; // 已全部领取
            } else {
              // 检查是否有可以领取的奖励
              const canReceive = this.personalInfo.dayRewards.some(item => 
                item.gotIt !== 1 && item.power <= this.personalInfo.dayPower
              );
              this.rewardStatus = canReceive ? 1 : 0; // 可以领或不能领
            }
          } else {
            this.rewardStatus = 0; // 默认不能领
          }
        }
      });
    },

    getTheReward(){
      // this.personalInfo.dayRewards // 筛选奖励数组中的gotIt为0未领取的第一项
      getTheReward({
        rewardId: this.personalInfo.dayRewards.find(item => item.gotIt == 0).rewardId
      }).then((res) => {
        if (res.code === 0) {
          this.showTicketPop = false
          getPersonalInfo() // 刷新
        }
      });
    },
    
    // 获取充电站列表
    getChargeStationList(params) {
      this.loading = true;
      
      getChargeStationList(params).then(res => {
        if (res.code === 0 && res.success) {
          // 将接口数据转换为页面需要的格式
          const records = res.data.records || [];
          
          if (this.page === 1) {
            // 第一页，直接替换数据
            this.stationList = records.map(item => ({
              id: item.stationId || 0,
              name: item.stationName || '未知站点',
              distance: (item.dist ? item.dist + 'km' : '距离未知'),
              facilities: item.facilities || '暂无设施信息',
              price: item.fee || '0.00',
              status: 'available',
              availableCount: item.fastRate ? parseInt(item.fastRate.split('/')[0]) : 0,
              totalCount: item.fastRate ? parseInt(item.fastRate.split('/')[1]) : 0,
              fastRate: item.fastRate || '0/0',
              slowRate: item.slowRate || '0/0',
              vipFee: item.vipFee,
              parkFee: this.truncateText(item.parkFee || '停车信息未知', 20),
              stationLat: item.stationLat,
              stationLng: item.stationLng
            }));
          } else {
            // 加载更多，追加数据
            const newRecords = records.map(item => ({
              id: item.stationId || 0,
              name: item.stationName || '未知站点',
              distance: (item.dist ? item.dist + 'km' : '距离未知'),
              facilities: item.facilities || '暂无设施信息',
              price: item.fee || '0.00',
              status: 'available',
              availableCount: item.fastRate ? parseInt(item.fastRate.split('/')[0]) : 0,
              totalCount: item.fastRate ? parseInt(item.fastRate.split('/')[1]) : 0,
              fastRate: item.fastRate || '0/0',
              slowRate: item.slowRate || '0/0',
              parkFee: this.truncateText(item.parkFee || '停车信息未知', 20),
              stationLat: item.stationLat,
              stationLng: item.stationLng
            }));
            this.stationList = [...this.stationList, ...newRecords];
          }
          
          this.total = res.data.total || 0;
          this.page++;
        } else {
          uni.showToast({
            title: res.msg || '获取充电站列表失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('充电站列表接口错误:', err);
        uni.showToast({
          title: '网络请求失败',
          icon: 'none'
        });
      }).finally(() => {
        this.loading = false;
        this.refreshing = false;
      });
    },
    
    // 切换标签
    switchTab(idx) {
      this.currentTab = idx;
      
      // 重置分页参数
      this.page = 1;
      this.stationList = [];
      this.total = 0;
      
      if (idx === 2) {
        // // 利行驿站：加载驿站列表
        // this.loadStoreList();
      } else {
        // 加载充电站列表
        const currentLocation = locationManager.getCurrentLocation();
        this.loadChargeStationList(currentLocation);
      }
    },
    
    // // 加载驿站列表（这里简化实现）
    // loadStoreList() {
    //   // 实际项目中需要调用真实接口
    //   this.storeLoading = true;
      
    //   // 模拟数据
    //   setTimeout(() => {
    //     this.storeList = [
    //       {
    //         id: '1',
    //         name: '利行驿站旗舰店',
    //         startWorkTime: '08:00',
    //         endWorkTime: '22:00',
    //         address: '上海市浦东新区张江高科技园区',
    //         phone: '021-12345678',
    //         dist: '1.5'
    //       },
    //       {
    //         id: '2',
    //         name: '利行驿站徐汇店',
    //         startWorkTime: '09:00',
    //         endWorkTime: '21:00',
    //         address: '上海市徐汇区漕溪北路',
    //         phone: '021-87654321',
    //         dist: '2.3'
    //       }
    //     ];
    //     this.storeTotal = this.storeList.length;
    //     this.storeLoading = false;
    //   }, 1000);
    // },
    
    // // 下拉刷新
    // onRefresh() {
    //   this.refreshing = true;
    //   this.page = 1;
      
    //   if (this.currentTab === 2) {
    //     // this.loadStoreList();
    //   } else {
    //     const currentLocation = locationManager.getCurrentLocation();
    //     this.loadChargeStationList(currentLocation);
    //   }
    // },
    
    // // 上拉加载更多
    // loadMore() {
    //   if (this.loading || this.total <= this.stationList.length) {
    //     return;
    //   }
      
    //   const currentLocation = locationManager.getCurrentLocation();
    //   this.loadChargeStationList(currentLocation);
    // },
    
    // 跳转到充电站详情
    goToStation(station) {
      console.log(station,'station数据')
      const stationData = encodeURIComponent(JSON.stringify(station));
      uni.navigateTo({
        url: `/pagesOne/station-detail/index?stationData=${stationData}`
      });
    },

    goToMap() {
			// 获取当前位置
			const currentLocation = locationManager.getCurrentLocation();
			
			// 准备传递给地图页面的数据
			const mapData = {
				entryType: 'map', // 标识从首页地图按钮进入
				stationList: this.stationList,
				userLat: currentLocation.latitude,
				userLng: currentLocation.longitude,
				hideCards: true, // 标记隐藏卡片
				// 添加充电站经纬度信息
				stationCoordinates: this.stationList.map(station => ({
					id: station.id || station.stationId, // 兼容两种ID字段
					name: station.name || station.stationName,
					latitude: station.stationLat,
					longitude: station.stationLng,
					stationData: station
				}))
			};
			
			// 编码数据并跳转
			const encodedData = encodeURIComponent(JSON.stringify(mapData));
			uni.navigateTo({
				url: `/pagesOne/map/map?mapData=${encodedData}`
			});
		},
    
    // 跳转到地图搜索
    goToMapSearch() {
      console.log('跳转')
      uni.navigateTo({
				url: '/pagesOne/search/index'
			});
    },
    
    // 跳转到功能页面
    goToTravelPlatform() {
      uni.navigateTo({
        url: '/pages/driver-life/rent-car'
      })
    },
    
    goToDriverLife() {
      console.log('司机生活')
      uni.redirectTo({
        url: '/pages/driver-life/index-new'
      });
      // uni.navigateTo({
			// 	url: '/pagesOne/search/index'
			// });
    },
    
    goToVehicleService() {
      // 跳转到维护保养页面
      console.log('跳转到维护保养页面')
      uni.navigateTo({
        url: '/pagesTwo/maintenance/index'
      })
    },
    
    goToDriverStation() {
      uni.navigateTo({
        url: '/pagesOne/driverStation/index'
      });
    },
    
    goToCarService() {
      uni.navigateTo({
        url: '/pagesOne/shop/shop'
      });
    },
    
    // 联系店铺
    contact(e) {
      const phone = e.currentTarget.dataset.phone;
      if (phone) {
        uni.makePhoneCall({
          phoneNumber: phone
        });
      }
    },
    
    // 跳转到订单页面
    goOrder(e) {
      const item = e.currentTarget.dataset.item;
      uni.navigateTo({
        url: `/pages/order/index?item=${encodeURIComponent(JSON.stringify(item))}`
      });
    },
    
    // 跳转到站点位置
    goToStationLocation(station) {
      const stationData = encodeURIComponent(JSON.stringify(station));
      uni.navigateTo({
        url: `/pagesOne/map/map?station=${stationData}`
      });
    },
    
    // 截断文本
    truncateText(text, maxLength) {
      if (!text || text.length <= maxLength) {
        return text;
      }
      return text.substring(0, maxLength) + '...';
    }
  }
}
</script>

<style scoped>
view {
  box-sizing: border-box;
  overflow: unset;
}
.lixing-title {
  color: #FFFFFF;
  font-size: 28rpx;
  font-weight: 600;
}
.gift-tips {
  font-family: PingFang SC, PingFang SC;
  font-size: 29rpx;
  color: #777777;
  text-align: center;
}
/deep/.pop-main-page .van-icon {
  color: #80273B; /* 修改为你想设置的颜色 */
}
.accept-btn {
  width: 602rpx;
  height: 119rpx;
  background: linear-gradient( 92deg, #FF7C11 0%, #FF542C 100%);
  border-radius: 60rpx 60rpx 60rpx 60rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 38rpx;
  color: #FFFFFF;
  text-align: center;
  line-height: 119rpx;
}
.gift-bottom-tips {
  font-family: PingFang SC, PingFang SC;
  font-size: 29rpx;
  color: #AAAAAA;
  text-align: center;
  margin-top: 38rpx;
}
/* .promotion-banner {
  width: 100%;
  height: 176rpx;
} */
.pop-main{
  background: url('https://app-1306761403.cos.accelerate.myqcloud.com/lx-images/rewardBg.png');
  background-size: 100% 100%;
}
.pop-task-title {
  font-family: Alimama FangYuanTi VF-Bold, Alimama FangYuanTi VF-Bold;
  font-size: 48rpx;
  text-align: center;
  color: #23222B;
}
.gift-text {
  background: #EA3953;
  border-radius: 21rpx 21rpx 21rpx 21rpx;
  border: 2rpx solid #F9E1BB;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 19rpx;
  color: #FFFFFF;
  line-height: 34rpx;
  text-align: center;
  padding: 4rpx 12rpx;
}
.pop-active-power {
  font-weight: 600;
  font-size: 24rpx;
  color: #AAAAAA;
  position: absolute;
  bottom: -28rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 100rpx;
  text-align:center;
}
.pop-power-number {
  font-weight: 600;
  font-size: 24rpx;
  color: #EA3953;
  position: absolute;
  bottom: -28rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 100rpx;
  text-align:center;
}
.task-btn {
  width: 602rpx;
  height: 119rpx;
  background: #E0E0E0;
  border-radius: 60rpx 60rpx 60rpx 60rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 38rpx;
  color: #FFFFFF;
  text-align: center;
  line-height: 119rpx;
}
.lixing-tag {
  display: flex;
  margin-left: 12rpx;
  align-items: center;
  margin-bottom: 12rpx;
}
.page-top {
  background-image: linear-gradient(180deg, #32374B 0%, rgba(50,55,75,0) 100%);
  padding: 0 32rpx;
}
.index-page-top {
  background: #31364A;
  padding: 20rpx;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.progress-divider {
  position: relative;
  width: 100%;
  /* width: 74rpx; */
  height: 6rpx;
  top: -14rpx;
  left: 0;
}
.progress-divider image {
  /* width: 74rpx; */
  width: 100%;
  height: 6rpx;
}
.active-line {
  background: transparent url('@/static/images/active-gift-line.png') repeat;
}
.no-active-line {
  width: 100%;
  height: 100%;
  background: #FFE3D1;
  border-radius: 3rpx 3rpx 3rpx 3rpx;
  position: absolute;
  top: 28rpx;
  left: 0;
}


.icon-gift {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  top: -30rpx;
  left: 50%;
  transform: translateX(-50%);
}
.icon-gift-pop {
  width: 96rpx;
  height: 96rpx;
  position: initial;
}
.active-checked {
  width: 20rpx;
  height: 20rpx;
  position: absolute;
  top: -10rpx;
  left: 50%;
  transform: translateX(-50%);
}
.active-power {
  font-family: Alimama FangYuanTi VF-Bold, Alimama FangYuanTi VF-Bold;
  font-size: 26rpx;
  color: rgba(255,255,255,0.5);
  text-align: center;
  position: absolute;
  bottom: -28rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 100rpx;
}
.power-number {
  font-family: Alimama FangYuanTi VF-Bold, Alimama FangYuanTi VF-Bold;
  font-size: 26rpx;
  color: #FFFFFF;
  text-align: center;
  position: absolute;
  bottom: -28rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 100rpx;
}
.monthly-number {
  font-family: DIN, DIN;
  font-weight: bold;
  font-size: 36rpx;
  color: #FFFFFF;
}
.monthly-bottom {
  font-family: PingFang SC, PingFang SC;
  font-size: 18rpx;
  color: rgba(255,255,255,0.7);
}
.monthly-unit{
  font-family: DIN, DIN;
  font-size: 20rpx;
  color: rgba(255,255,255,0.65);
}
.function-detail {
  font-family: PingFang SC, PingFang SC;
  font-size: 18rpx;
  color: #13B09F;
}
.function-detail text {
  margin-right: 3rpx;
}
.charging-page {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* 顶部地图搜索区域 */
.map-header-section {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding-top: 8rpx;
}
.map-header-search {
  /* width: 378rpx; */
  flex: 0.6;
  height: 64rpx;
  border-radius: 32rpx 32rpx 32rpx 32rpx;
  border: 2rpx solid #FFFFFF;
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  background: #FFFFFF;
}

.map-search-container {
  /* flex: 1; */
  display: flex;
  align-items: center;
  padding: 6rpx 8rpx;
  width: 130rpx;
  height: 64rpx;
  background: #FFFFFF;
  border-radius: 32rpx 32rpx 32rpx 32rpx;
  border: 2rpx solid #FFFFFF;
}

.map-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}
.map-text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 24rpx;
  color: #333333;
  line-height: 29rpx;
}

.search-input {
  /* flex: 1; */
  font-size: 28rpx;
  color: #333;
  /* background: transparent; */
}

.search-placeholder {
  font-family: PingFang SC, PingFang SC;
  font-size: 26rpx;
  color: #999999;
}

.header-actions {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

/* 充电统计区域 */
.charge-stats-section {
  display: flex;
}

.stats-card {
  width: 424rpx;
  height: 200rpx;
  background: linear-gradient( 90deg, #01DFAA 0%, #13B09F 100%);
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  margin-right: 20rpx;
  padding: 16rpx 12rpx;
  /* box-sizing: border-box; */
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 34rpx;
}

.stats-title {
  font-family: Alimama FangYuanTi VF-Bold, Alimama FangYuanTi VF-Bold;
  font-size: 22rpx;
  color: #FFFFFF;
}

.stats-action {
  font-family: PingFang SC, PingFang SC;
  font-size: 18rpx;
  color: rgba(255,255,255,0.7);
}

.stats-progress {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 0 20rpx;
}


.progress-item {
  display: flex;
}


.progress-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
  /* width: 72rpx; */
  height: 32rpx;
  background: #FEF7F4;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  border: 2rpx solid #F9E1BB;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16rpx;
  color: #EA3854;
  position: relative;
  padding: 12rpx 4rpx;
  /* overflow: unset !important; */
}
.pop-progress-badge {
  background: #EA3953;
  border-radius: 21rpx 21rpx 21rpx 21rpx;
  border: 2rpx solid #F9E1BB;
  background: #EA3953;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 20rpx;
  color: #FFFFFF;
  line-height: 24rpx;
  text-align: center;
  padding: 4rpx 12rpx;
}
.pop-progress-badge.pop-active {
  background: #FBECE4;
  border-radius: 21rpx 21rpx 21rpx 21rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 20rpx;
  color: #EB4A69;
  line-height: 24rpx;
  text-align: center;
  padding: 4rpx 12rpx;
}

.progress-badge.active {
  background: #FEF7F4;
  border: 2rpx solid #F4BECB;
  color: #F4BECB;
}

.progress-text {
  font-size: 24rpx;
}

.monthly-stats {
  height: 200rpx;
  flex: 1;
  background: url('https://app-1306761403.cos.accelerate.myqcloud.com/lx-images/month-bg.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  padding: 14rpx;
}

.month-total {
  font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
  font-weight: bold;
  font-size: 22rpx;
  color: #FFFFFF;
}

.monthly-action {
  font-size: 20rpx;
  background: rgba(255, 255, 255, 0.2);
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
}

/* 促销活动区域 */
/* .promotion-section {
  height: 176rpx;
  background-size: 270rpx 178rpx;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  margin-top: 16rpx;
}
swiper {
  height: 100%
}
.promotion-text-one {
  font-family: PingFang SC, PingFang SC;
  font-size: 22rpx;
  color: rgba(255,255,255,0.7);
  margin-bottom: 12rpx;
}
.promotion-text-two {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 40rpx;
  color: #FFFCFC;
  margin-bottom: 12rpx;
} */
/* .receive-btn {
  width: 107rpx;
  height: 35rpx;
  background: #1B4640;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  font-family: PingFang SC, PingFang SC;
  font-size: 19rpx;
  color: #FFFFFF;
  text-align: center;
  line-height: 35rpx;
} */
/* .promotion-image {
  width: 100%;
  height: 200rpx;
  border-radius: 15rpx;
} */

/* 功能导航区 */
.function-nav-section {
  /* padding: 20rpx 0;
  background-color: #fff;
  margin-top: 20rpx;
  background: #31364A;
  border-radius: 16rpx 16rpx 16rpx 16rpx; */
  /* width: 646rpx;
  height: 132rpx; */
  background: rgba(255,255,255,0.1);
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  margin-top: 16rpx;
  padding: 12rpx
}

.function-grid {
  display: flex;
  /* padding: 0 30rpx; */
}

.function-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* width: 146rpx; */
  height: 134rpx;
  background: #FFFFFF;
  /* background: #FFFFFF url('@/static/images/official_img__topics_tag.png') no-repeat bottom right; */
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  margin-right: 10rpx;
  /* margin-bottom: 24rpx; */
  padding: 26rpx;
  /* box-sizing: border-box; */
  background: linear-gradient( 337deg, #FFFFFF 0%, #C0FFF7 100%);
}
.travel-platform {
  /* background: #FFFFFF url('@/static/images/ticket-bg.png') no-repeat bottom right;
  background-size: 54rpx 48rpx; */
}
.driver-life {
  /* background: #FFFFFF url('@/static/images/driver-life-bg.png') no-repeat bottom right;
  background-size: 74rpx 66rpx; */
}
.car-service {
  /* background: #FFFFFF url('@/static/images/car-service.png') no-repeat bottom right;
  background-size: 74rpx 66rpx; */
}
.stage-bg {
  /* background: #FFFFFF url('@/static/images/stage-bg.png') no-repeat bottom right;
  background-size: 74rpx 66rpx; */
}
.function-item:nth-child(4) {
  margin-right: 0;
}

.function-icon {
  width: 50rpx;
  height: 52rpx;
  margin-bottom: 14rpx;
}

.function-text {
  font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
  font-weight: bold;
  font-size: 24rpx;
  color: #333333;
  margin-bottom: 4rpx;
}

/* 筛选区域 */
.filter-section {
  background-color: #fff;
  padding: 20rpx 30rpx;
  margin-top: 20rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
}


.filter-tab {
  /* flex: 1; */
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding-bottom: 10rpx;
  margin-right: 58rpx;
}

.filter-tab.active {
  color: #000000;
  font-weight: bold;
  position: relative;
}

/* .filter-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #ff6b35;
  border-radius: 2rpx;
} */

/* 精选充电站区域 */
.featured-section {
  background: linear-gradient( 180deg, #01DFAA 0%, #13B09F 100%);
  box-shadow: 0rpx 6rpx 38rpx 0rpx rgba(0,0,0,0.06);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding-top: 16rpx;
  padding-bottom: 4rpx;
}
.tag-text {
  width: 76rpx;
  height: 32rpx;
  background: #FFA213;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 1rpx solid rgba(255,255,255,0.58);
  font-family: PingFang SC, PingFang SC;
  font-size: 20rpx;
  color: #FFFFFF;
  text-align: center;
  line-height: 32rpx;
  margin-right: 10rpx;
}

.lixing-charge {
  width: 120rpx;
  height: 40rpx;
}

/* 卡券区域样式 */
.coupon-section {
  margin-top: 20rpx;
  /* padding: 0 32rpx; */
  display: flex;
  gap: 16rpx;
}

.my-coupon {
  width: 206rpx;
  height: 166rpx;
  background: url('@/static/images/ticketBg.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 16rpx;
  padding: 14rpx 16rpx;
  /* margin-bottom: 20rpx; */
}

.coupon-title {
  font-size: 22rpx;
  color: #FFFFFF;
  font-weight: 600;
  /* margin-bottom: 8rpx; */
}

.coupon-count {
  font-size: 20rpx;
  color: rgba(255,255,255,0.65);
}

.coupon-tip {
  font-size: 18rpx;
  color: rgba(255,255,255,0.36);
  margin-bottom: 4rpx;
}


/* 卡券明细样式 */
.coupon-detail {
  flex: 1;
  background: rgba(19,175,159,0.16);
  border-radius: 16rpx;
  padding: 14rpx 16rpx;
  height: 166rpx;
  position: relative;
}

.detail-title {
  font-size: 22rpx;
  color: #FFFFFF;
  font-weight: bold;
  /* margin-bottom: 20rpx; */
  /* display: block; */
  position: absolute;
  top: 14rpx;
  left: 16rpx;
}

.coupon-list {
  display: flex;
  justify-content: space-between;
}

.coupon-card {
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  /* box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(255, 107, 42, 0.2); */
}

.coupon-icon {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 16rpx;
}

.coupon-amount {
  font-size: 16rpx;
  color: #FF5F00;
  font-weight: bold;
  /* margin-bottom: 8rpx; */
  font-style: italic;
  width: 126rpx;
  height: 126rpx;
  /* background: linear-gradient(135deg, #FF6B2A 0%, #FF8500 100%); */
  background: url('@/static/images/red-ticket.png') no-repeat;
  background-size: 100% 100%;
  text-align: center;
  line-height: 150rpx;
  margin-top: 10rpx;
}

.coupon-type {
  font-size: 16rpx;
  color: #FFFFFF;
  font-style: italic;
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 126rpx;
  text-align: center;
}

/* 添加发光效果 */
/* .coupon-card::before {
  content: '';
  position: absolute;
  top: -2rpx;
  left: -2rpx;
  right: -2rpx;
  bottom: -2rpx;
  border-radius: 14rpx;
  background: linear-gradient(135deg, #FF6B2A 0%, #FF8500 100%);
  z-index: -1;
  animation: glow 2s ease-in-out infinite alternate;
} */

/* @keyframes glow {
  from {
    box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(255, 107, 42, 0.2);
  }
  to {
    box-shadow: 0rpx 6rpx 30rpx 0rpx rgba(255, 107, 42, 0.4);
  }
} */
</style>